'use strict';

let arPics = document.querySelectorAll('.ar_pic');
let texts = document.querySelectorAll('.text');
let arDates = document.querySelectorAll('.ar_date');
let deImg = document.querySelector('.de_img');
let deTitle = document.querySelector('.de_title');
let deDate = document.querySelector('.de_date');
let description = document.querySelector('.description');
let picImgs = document.querySelectorAll('.pic_img');
const xhr = new XMLHttpRequest();

window.addEventListener('load', () => {
    let promise = new Promise((resolve, rejecr) => {
        xhr.open('get', '/upload/articles', true);
        xhr.send();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                if (xhr.responseText === 'no') {
                    alert('获取数据失败！');
                    return;
                }
                let objData = JSON.parse(xhr.responseText);
                for (let i = 0; i < arPics.length; i++) {
                    if (objData.infoArr[i]) {
                        arPics[i].src = objData.infoArr[i].imgUrlBase64;
                        texts[i].innerHTML = objData.infoArr[i].context;
                        arDates[i].innerHTML = objData.infoArr[i].update;
                    }
                }
                resolve();
            }
        }
    })
    promise.then((value) => {
        return new Promise((resolve, reject) => {
            xhr.open('get', '/upload/webDemo', true);
            xhr.send();
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    if (xhr.responseText === 'no') {
                        alert('获取数据失败！');
                        return;
                    }
                    let objData = JSON.parse(xhr.responseText);
                    if (objData.infoArr[0]) {
                        deImg.src = objData.infoArr[0].imgUrlBase64;
                        deTitle.innerHTML = objData.infoArr[0].title;
                        deTitle.href = objData.infoArr[0].aHref;
                        description.innerHTML = objData.infoArr[0].context;
                        deDate.innerHTML = objData.infoArr[0].update;
                    }
                    resolve();
                }
            }
        })
    }).then((value) => {
        return new Promise((resolve, reject) => {
            xhr.open('get', '/get_pic?classN=view', true);
            xhr.send();
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    if (xhr.responseText === 'no') {
                        alert('获取数据失败！');
                        return;
                    }
                    let objData = JSON.parse(xhr.responseText);
                    for (let i = 0; i < 2; i++) {
                        if (objData.infoArr[i]) {
                            picImgs[i].setAttribute('data-src', objData.infoArr[i].name);
                            picImgs[i].setAttribute('data-class', objData.infoArr[i].class);
                        }
                    }
                    resolve();
                }
            }
        })
    }).then((value) => {
        return new Promise((resolve, reject) => {
            xhr.open('get', '/get_pic?classN=manga', true);
            xhr.send();
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    if (xhr.responseText === 'no') {
                        alert('获取数据失败！');
                        return;
                    }
                    let objData = JSON.parse(xhr.responseText);
                    for (let i = 2; i < 4; i++) {
                        if (objData.infoArr[i - 2]) {
                            picImgs[i].setAttribute('data-src', objData.infoArr[i - 2].name);
                            picImgs[i].setAttribute('data-class', objData.infoArr[i - 2].class);
                        }
                    }
                    resolve();
                }
            }
        })
    }).then((value) => {
        return new Promise((resolve, reject) => {
            xhr.open('get', '/get_pic?classN=cate', true);
            xhr.send();
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    if (xhr.responseText === 'no') {
                        alert('获取数据失败！');
                        return;
                    }
                    let objData = JSON.parse(xhr.responseText);
                    for (let i = 4; i < 5; i++) {
                        if (objData.infoArr[i - 4]) {
                            picImgs[i].setAttribute('data-src', objData.infoArr[i - 4].name);
                            picImgs[i].setAttribute('data-class', objData.infoArr[i - 4].class);
                        }
                    }
                    resolve();
                }
            }
        })
    }).then((value) => {
        setTimeout(() => {
            const xhr = new XMLHttpRequest();
            for (let i = 0; i < picImgs.length; i++) {
                if (picImgs[i].getAttribute('data-src')) {
                    let classN = picImgs[i].getAttribute('data-class');
                    let name = picImgs[i].getAttribute('data-src');
                    xhr.open('get', `/get_pic_file?classN=${classN}&name=${name}`, false);
                    xhr.send();
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        if (xhr.responseText === 'no') {
                            alert('图片加载失败！');
                            return;
                        }
                        picImgs[i].src = xhr.responseText;
                    }
                }
            }
        }, 100)
    }).catch((reason) => {
        console.error(reason);
    })
})